<div class="lv-list-item-meta-avatar" *ngIf="lvAvatar">
  <ng-container *ngTemplateOutlet="content; context: { $implicit: lvAvatar }"></ng-container>
</div>

<div class="lv-list-item-meta-content" *ngIf="lvTitle || lvDescription">
  <ng-container *ngIf="itemLayout !== 'horizontal'">
    <ng-container *ngTemplateOutlet="titleContent"></ng-container>
  </ng-container>

  <ng-container *ngIf="itemLayout === 'horizontal'">
    <div class="lv-list-item-title-content">
      <ng-container *ngTemplateOutlet="titleContent"></ng-container>
      <div *ngIf="extra || actions.length" class="lv-list-item-auxiliary">
        <ng-template [ngTemplateOutlet]="extraTpl"></ng-template>
        <ng-template [ngTemplateOutlet]="actionsTpl"></ng-template>
      </div>
    </div>
  </ng-container>

  <div class="lv-list-item-meta-description" *ngIf="lvDescription">
    <ng-container *ngTemplateOutlet="content; context: { $implicit: lvDescription }"></ng-container>
  </div>
</div>

<ng-template #titleContent>
  <ng-container *ngIf="lvTitle">
    <ng-container *ngTemplateOutlet="content; context: { $implicit: lvTitle, type: 'title' }"></ng-container>
  </ng-container>
</ng-template>

<ng-template #extraTpl>
  <div *ngIf="extra" class="lv-list-item-extra">
    <ng-container *ngTemplateOutlet="extra; context: { $implicit: lvDataSource }"></ng-container>
  </div>
</ng-template>

<ng-template #actionsTpl>
  <ul class="lv-list-item-actions" *ngIf="actions?.length">
    <li *ngFor="let action of actions"><ng-container *ngTemplateOutlet="action; context: { $implicit: lvDataSource }"></ng-container></li>
  </ul>
</ng-template>

<!--lvAvatar不需要省略，lvDescription规范中默认可以换行-->
<ng-template #content let-data let-type="type">
  <ng-container *ngIf="typeUtils.isRealString(data)">
    <div *ngIf="type === 'title'" lvOverflow class="lv-list-item-meta-title">{{ data }}</div>

    <span *ngIf="type !== 'title'">{{ data }}</span>
  </ng-container>
  <ng-container *ngIf="typeUtils.isTemplateRef(data)">
    <ng-container *ngTemplateOutlet="data; context: { $implicit: lvDataSource }"></ng-container>
  </ng-container>
</ng-template>
